<!-- 电力编辑器页面 -->
<template>
  <div id="root">
    <!-- 顶部 -->
    <div  id="components-layout">
      <div class="header">
        <div class="enter">
          <el-button type="primary" @click="testB"><i class="el-icon-d-arrow-left el-icon--left"></i>返回电力图</el-button>
          <el-button type="primary" @click="testF"><i class="el-icon-view el-icon--left"></i>数据预览</el-button>
          <el-button class="export" type="primary" @click="testD"><i class="el-icon-printer el-icon--left"></i>导出数据</el-button>
          <div class="upload">
            <input id="file" type="file" accept=".json"/>
            <div class="text">上传json文件 :</div>
          </div>
          <el-button class="import" type="primary" @click="testI"><i class="el-icon-upload el-icon--left"></i>导入数据</el-button>
          <el-button class="save" type="primary" @click="testS"><i class="el-icon-time el-icon--left"></i>保存画布</el-button>
          <el-button type="primary" @click="testV"><i class="el-icon-view el-icon--left"></i>预览画布</el-button>
          <el-button type="primary" @click="testN"><i class="el-icon-close el-icon--left"></i>清空画布</el-button>
        </div>
        <div class="full">
          <span v-if="shrink" @click="fullScreen" class="icon-shrink svgfont">
            <svg t="1617785399883" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1954" width="48" height="48"><path d="M628.053333 628.053333a32 32 0 0 1 45.226667 0l158.72 158.634667V693.333333l0.298667-4.352A32 32 0 0 1 896 693.333333v181.333334l-0.341333 3.84a21.333333 21.333333 0 0 1-20.992 17.493333h-181.333334l-4.352-0.298667a32 32 0 0 1-27.648-31.701333l0.298667-4.352a32 32 0 0 1 31.701333-27.648h93.44l-158.72-158.72-3.114666-3.584a32 32 0 0 1 3.114666-41.642667z m-232.106666 0a32 32 0 0 1 3.114666 41.642667l-3.114666 3.584-158.72 158.72h93.44a32 32 0 0 1 31.701333 27.648l0.298667 4.352a32 32 0 0 1-27.648 31.701333L330.666667 896H149.333333a21.333333 21.333333 0 0 1-20.992-17.493333L128 874.666667v-181.333334a32 32 0 0 1 63.701333-4.352l0.298667 4.352v93.354667l158.72-158.634667a32 32 0 0 1 45.226667 0zM874.666667 128a21.333333 21.333333 0 0 1 20.992 17.493333L896 149.333333v181.333334a32 32 0 0 1-63.701333 4.352L832 330.666667V237.312L673.28 395.946667a32 32 0 0 1-48.341333-41.642667l3.114666-3.584 158.72-158.72h-93.44a32 32 0 0 1-31.701333-27.648L661.333333 160a32 32 0 0 1 27.648-31.701333L693.333333 128h181.333334zM330.666667 128l4.352 0.298667a32 32 0 0 1 27.648 31.701333l-0.298667 4.352a32 32 0 0 1-31.701333 27.648H237.226667l158.72 158.72 3.114666 3.584a32 32 0 0 1-48.341333 41.642667L192 237.312V330.666667l-0.298667 4.352A32 32 0 0 1 128 330.666667V149.333333l0.341333-3.84A21.333333 21.333333 0 0 1 149.333333 128h181.333334z" p-id="1955"></path></svg>
          </span>
          <span v-if="!shrink" @click="exitFullscreen" class="icon-shrink svgfont">
            <svg t="1617785399883" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1954" width="48" height="48"><path d="M628.053333 628.053333a32 32 0 0 1 45.226667 0l158.72 158.634667V693.333333l0.298667-4.352A32 32 0 0 1 896 693.333333v181.333334l-0.341333 3.84a21.333333 21.333333 0 0 1-20.992 17.493333h-181.333334l-4.352-0.298667a32 32 0 0 1-27.648-31.701333l0.298667-4.352a32 32 0 0 1 31.701333-27.648h93.44l-158.72-158.72-3.114666-3.584a32 32 0 0 1 3.114666-41.642667z m-232.106666 0a32 32 0 0 1 3.114666 41.642667l-3.114666 3.584-158.72 158.72h93.44a32 32 0 0 1 31.701333 27.648l0.298667 4.352a32 32 0 0 1-27.648 31.701333L330.666667 896H149.333333a21.333333 21.333333 0 0 1-20.992-17.493333L128 874.666667v-181.333334a32 32 0 0 1 63.701333-4.352l0.298667 4.352v93.354667l158.72-158.634667a32 32 0 0 1 45.226667 0zM874.666667 128a21.333333 21.333333 0 0 1 20.992 17.493333L896 149.333333v181.333334a32 32 0 0 1-63.701333 4.352L832 330.666667V237.312L673.28 395.946667a32 32 0 0 1-48.341333-41.642667l3.114666-3.584 158.72-158.72h-93.44a32 32 0 0 1-31.701333-27.648L661.333333 160a32 32 0 0 1 27.648-31.701333L693.333333 128h181.333334zM330.666667 128l4.352 0.298667a32 32 0 0 1 27.648 31.701333l-0.298667 4.352a32 32 0 0 1-31.701333 27.648H237.226667l158.72 158.72 3.114666 3.584a32 32 0 0 1-48.341333 41.642667L192 237.312V330.666667l-0.298667 4.352A32 32 0 0 1 128 330.666667V149.333333l0.341333-3.84A21.333333 21.333333 0 0 1 149.333333 128h181.333334z" p-id="1955"></path></svg>
          </span>
        </div>
      </div>
    </div>
    <!-- 画布 -->
    <div class="pageMain">
      <div class="leftNav">
        <LeftToolBar></LeftToolBar>
      </div>
      <div class="centerContain" :class="{ fixed: !shrink }">
        <div class="canvas-content" id="canvas" @mousemove="MouseMove" @mousedown="MousedownCanvas" @mouseup="MouseupCanvas" @dblclick="DblClick" @mousewheel="MouseWheel">
          <!--拖动辅助线-->
          <div id="guide-x"></div>
          <div id="guide-y"></div>
          <!-- 画布 -->
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
            style="background-color:#000000" width="100%" height="100%">
            <defs />
            <filter x="0" y="0" width="1" height="1" id="solid">
              <feFlood flood-color="rgb(255,255,255)" />
              <feComposite in="SourceGraphic" />
            </filter>
            <g style="cursor:pointer" v-for="(item,index) in svgLists" :key="item.id" :id=item.id
              @mousedown="MousedownSvg(item.id,index)" :title=item.title
              :transform="'translate('+(item.svgPositionX)+','+(item.svgPositionY)+')' +'rotate('+item.angle+')'">
              <SvgComponents :height=item.height :color=item.svgColor :width=item.width :type=item.type
                :tableData=item.tableData :fontSize=item.fontSize :svgText=item.svgText :editable=editable>
              </SvgComponents>
            </g>
          </svg>
        </div>
      </div>
      <!-- 外观数据 -->
      <div class="rightNav">
        <RightToolBar :svgInfo=selectSvgInfo @setTableAttr="setTableAttr"></RightToolBar>
      </div>
    </div>
  </div>
</template>
<script>
  import LeftToolBar from '@/components/topo/LeftToolBar.vue';
  import RightToolBar from '@/components/topo/RightToolBar.vue';
  import SvgComponents from '@/components/topo/SvgComponents.vue';
  import global from '@/global/global.js'; //全局变量
  import copyText from '@/util/UCore.js';
  import FileSaver from 'file-saver';  //json插件
  export default {
    components: {
      LeftToolBar,
      RightToolBar,
      SvgComponents
    },
    data() {
      return {
        shrink: true, //收缩状态  true收缩  false展开
        svgLists: [], //json画布数据
        //鼠标位置
        mousePosition: {
          positionX: '',
          positiony: ''
        },
        //辅助线元素
        guideX: '',
        guideY: '',
        CurrentlySelectedToolBarType: '', //选中的工具栏svg类型
        CurrentlySelectedToolBarTypeName: '', //选中的工具栏svg类型名称
        CurrentlySelectedToolBarTitle: '', //选中的工具栏svg标题
        CurrentlySelectedToolBarColor: '', //选中的工具栏svg颜色
        CurrentlySelectedToolBarHeight: '', //选中的工具栏svg高度
        CurrentlySelectedToolBarFontSize: '', //选中的工具栏svg字体大小
        CurrentlySelectedToolBarText: '', //选中的工具栏svg文字
        CurrentlySelectedToolBarWidth: '', //选中的工具栏svg高度
        CurrentlySelectedToolBarAngle: '', //选中的工具栏svg角度
        moveSvgID: '', //要移动的svg
        moveSvgIndex: 0,
        testvalue: 0,
        selectSvgInfo: '',
        tableRowCount: 2, //表格默认行数
        tableColCount: 2, //表格默认列数
        tableDefaultData: [],
        canvasZoom: 70, //画布缩放百分比
        userInfo: '',
        editable: true,
        ImportJSON: [], //导入的json
        inputName: '未选择任何文件'
      }
    },
    methods: {
      // 初始化
      init() {
        this.svgLists=JSON.parse(localStorage.getItem('svginfo'));
      },
      // 全屏  
      fullScreen() {
        let _this = this
        this.shrink = !this.shrink
        let element = document.documentElement;
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.msRequestFullscreen) {
          element.msRequestFullscreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.webkitRequestFullscreen) {
          element.webkitRequestFullscreen();
        }
        // 监听全屏后esc事件
        window.onresize = function () {
          if (!checkFull()) {
            _this.shrink = !_this.shrink
          }
        }

        function checkFull() {
          var isFull =
            document.fullscreenElement ||
            document.mozFullScreenElement ||
            document.webkitFullscreenElement
          if (isFull === undefined) isFull = false
          return isFull
        }
      },
      //退出全屏 
      exitFullscreen() {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        }
      },
      MouseMove(e) {
        if (e.offsetX == -1) {
          return;
        }
        if (e.target.nodeName == 'INPUT') {
          return;
        }
        if (e.offsetY == -1) {
          return;
        }
        if (this.moveSvgID == '') {
          return;
        }
        this.mousePosition.positionX = e.offsetX;
        this.mousePosition.positionY = e.offsetY;
        if (this.mousePosition.positionX < 1) {
          this.mousePosition.positionX = 10;
        }
        if (this.mousePosition.positionY < 1) {
          this.mousePosition.positionY = 10;
        }
        let svgID = this.svgLists[this.moveSvgIndex].id;
        //排除当前元素剩下的所有svg元素的列表
        let anyPositionList = this.svgLists.filter(function (list) {
          return list.id != svgID
        });
        //将要移动的元素坐标设备为鼠标坐标
        let svgPositionX = this.mousePosition.positionX;
        let svgPositionY = this.mousePosition.positionY;
        let _this = this;
        setTimeout(function () {
          //少于十个像素自动吸附
          //从所有的x坐标列表中查与当前坐标少于10个像素的组件是否存在
          let exitsAdsorbX = anyPositionList.filter(function (list) {
            return -10 < (list.svgPositionX - svgPositionX) && (list.svgPositionX - svgPositionX) < 10
          });
          if (exitsAdsorbX.length > 0) {
            svgPositionX = exitsAdsorbX[0].svgPositionX;
          }
          //y轴相同 横向坐标自动吸附
          let exitsAdsorbY = anyPositionList.filter(function (list) {
            return -10 < (list.svgPositionY - svgPositionY) && (list.svgPositionY - svgPositionY) < 10
          });
          if (exitsAdsorbY.length > 0) {
            svgPositionY = exitsAdsorbY[0].svgPositionY;
          }
          _this.svgLists[_this.moveSvgIndex].svgPositionX = svgPositionX;
          _this.svgLists[_this.moveSvgIndex].svgPositionY = svgPositionY;
          //从所有的x坐标列表中查当前坐标是否存在
          let exitsNowX = anyPositionList.filter(function (list) {
            return list.svgPositionX === svgPositionX
          });
          if (exitsNowX.length > 0) {
            _this.guideY.style.setProperty('left', svgPositionX - 1 + 'px');
            _this.guideY.style.display = 'inline';
          } else {
            _this.guideY.style.display = 'none';
          }
          //从所有的y坐标列表中查当前坐标是否存在
          let exitsNowY = anyPositionList.filter(function (list) {
            return list.svgPositionY === svgPositionY
          });
          if (exitsNowY.length > 0) {
            _this.guideX.style.setProperty('top', svgPositionY + 'px');
            _this.guideX.style.display = 'inline';
          } else {
            _this.guideX.style.display = 'none';
          }
        }, 1);
      },
      MousedownCanvas() {
        // console.log('点击了画布');
      },
      MousedownSvg(id, index) {
        global.CurrentlySelectedToolBarType = '';
        global.CurrentlySelectedToolBarTitle = '';
        this.CurrentlySelectedToolBarType = '';
        this.CurrentlySelectedToolBarTitle = '';
        //从数组里面根据index找到当前元素
        this.moveSvgID = id;
        this.moveSvgIndex = index;
        this.selectSvgInfo = this.svgLists[index];
        //获取所有g标签 将当前标签追加选中样式
        let gAnyList = document.querySelectorAll('g');
        gAnyList.forEach(g => {
          g.classList.remove("topo-layer-view-selected")
        });
        document.getElementById(id).classList.add("topo-layer-view-selected");
      },
      MouseupCanvas() {
        this.guideX.style.display = 'none';
        this.guideY.style.display = 'none';
        if (this.CurrentlySelectedToolBarTitle != '' || this.CurrentlySelectedToolBarType != '') {
          return;
        }
        this.moveSvgID = '';
      },
      MouseWheel(e) {
        //获取当前选中组件
        let selectSvgInfo = this.selectSvgInfo;
        if (selectSvgInfo == undefined || selectSvgInfo == null || selectSvgInfo == '') {
          return;
        }
        e.preventDefault();
        //判断滚轮方向 -100是往上滑 100是下滑
        let svgZoom = e.deltaY == "-100" ? "5" : "-5";
        selectSvgInfo.height += parseInt(svgZoom);
        if (selectSvgInfo.height < 1) {
          selectSvgInfo.height = 1;
        }
      },
      DblClick() {
        //获取所有g标签 清除所有选中样式
        let gAnyList = document.querySelectorAll('g');
        gAnyList.forEach(g => {
          g.classList.remove("topo-layer-view-selected")
        });
        this.selectSvgInfo = '';
      },
      testB() {
        this.$router.go(-1)
      },
      // 预览数据
      testF() {
        let jsData = JSON.stringify(this.svgLists)
        this.utils.copyText(jsData)
        this.$confirm(jsData, '组态数据', {
          confirmButtonText: '复制',
          customClass: 'msgbox'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '复制成功!',
            duration: 500
          });
        }).catch(() => {
          console.log('取消')   
        });
      },
      // 导出数据
      testD() {
        let jsData = JSON.stringify(this.svgLists)
        const blob = new Blob([jsData], {type: ''})
        FileSaver.saveAs(blob, 'jsondata.json')
      },
      // 导入数据
      testI() {
        // this.svgLists = global.AnalogData;   可读取插件全局中的data对象
          const _this = this
          const file = document.getElementById('file').files[0]
          const reader = new FileReader()
          reader.readAsText(file)
          console.log(_this.svgLists)
          reader.onload = function () {
            // this.result为读取到的json字符串，需转成json对象
            _this.ImportJSON = JSON.parse(this.result)
            // 检测是否导入成功
            console.log(_this.ImportJSON)
            if (_this.ImportJSON.length > 0) {
              _this.$message({
                message: '导入成功!',
                type: 'success',
                duration: 500
              });
            } else {
              this.$message.error('导入异常');
              duration: 500
            }
            _this.svgLists = _this.ImportJSON
          }
      },
      // 预览topo
      testV() {
        this.$router.push({
          path: "/topoview"
        });
      },
      // 保存topo
      testS() {
        localStorage.setItem('svginfo', JSON.stringify(this.svgLists));
        this.$message({
          message: '保存成功',
          type: 'success',
          duration: 500
        });
      },
      // 清空topo
      testN() {
        this.svgLists = [];
      },
      //设置表格属性
      setTableAttr(id, rowCount, colCount) {
        //根据当前id找到当前表格的index
        let tableIndex = this.svgLists.indexOf(this.svgLists.filter(f => f.id == id)[0]);
        if (tableIndex == -1) {
          return;
        }
        let svgType = this.svgLists.filter(f => f.id == id)[0].type;
        if (svgType != 'TableSvg') {
          return;
        }
        let tableData = [];
        for (let r = 0; r < rowCount; r++) {
          let tableColDataList = [];
          for (let c = 0; c < colCount; c++) {
            if (this.svgLists[tableIndex].tableData.length >= r + 1 && this.svgLists[tableIndex].tableData[r].cols
              .length >= c + 1) {
              tableColDataList.push(this.svgLists[tableIndex].tableData[r].cols[c]);
            } else {

              let tableColData = {
                "id": this.UCore.GenUUid(),
                "val": `${r+1}行${c+1}列`
              }
              tableColDataList.push(tableColData);
            }

          }
          let tableRowData = {
            "cols": tableColDataList
          };
          tableData.push(tableRowData)
        }
        this.svgLists[tableIndex].tableData = tableData;
      }
    },
    mounted() {
      let _this = this;
      let canvasdiv = document.querySelector('#canvas');
      _this.guideX = document.querySelector('#guide-x'); //辅助线x轴
      _this.guideY = document.querySelector('#guide-y'); //辅助线y轴
      canvasdiv.addEventListener("dragover", function (e) {
        e.preventDefault();
        _this.CurrentlySelectedToolBarType = global.CurrentlySelectedToolBarType;
        _this.CurrentlySelectedToolBarTitle = global.CurrentlySelectedToolBarTitle;
        _this.CurrentlySelectedToolBarTypeName = global.CurrentlySelectedToolBarTypeName;
        _this.CurrentlySelectedToolBarColor = global.CurrentlySelectedToolBarColor;
        _this.CurrentlySelectedToolBarHeight = global.CurrentlySelectedToolBarHeight;
        _this.CurrentlySelectedToolBarFontSize = global.CurrentlySelectedToolBarFontSize;
        _this.CurrentlySelectedToolBarText = global.CurrentlySelectedToolBarText;
        _this.CurrentlySelectedToolBarWidth = global.CurrentlySelectedToolBarWidth;
        _this.CurrentlySelectedToolBarAngle = global.CurrentlySelectedToolBarAngle;
      }, false);
      canvasdiv.addEventListener("drop", function (e) {
        e.preventDefault();
        if (_this.CurrentlySelectedToolBarType == '') {
          return;
        }
        let tableData = [];
        if (_this.CurrentlySelectedToolBarType == 'TableSvg') {
          for (let r = 0; r < _this.tableRowCount; r++) {
            let tableColDataList = [];
            for (let c = 0; c < _this.tableColCount; c++) {
              let tableColData = {
                "id": _this.UCore.GenUUid(),
                "val": `${r+1}行${c+1}列`
              }
              tableColDataList.push(tableColData);
            }
            let tableRowData = {
              "cols": tableColDataList
            };
            tableData.push(tableRowData)
          }
        }
        //根据类型和鼠标位置创建组件
        console.log(_this.UCore.GenUUid)
        let svgItem = {
          id: _this.UCore.GenUUid(),
          sort: 0,
          title: _this.CurrentlySelectedToolBarTitle,
          type: _this.CurrentlySelectedToolBarType,
          typeName: _this.CurrentlySelectedToolBarTypeName,
          svgColor: _this.CurrentlySelectedToolBarColor,
          svgPositionX: e.offsetX,
          svgPositionY: e.offsetY,
          height: _this.CurrentlySelectedToolBarHeight,
          width: _this.CurrentlySelectedToolBarWidth,
          fontSize: _this.CurrentlySelectedToolBarFontSize,
          svgText: _this.CurrentlySelectedToolBarText,
          tableRowCount: _this.tableRowCount,
          tableColCount: _this.tableColCount,
          tableData: tableData,
          angle: _this.CurrentlySelectedToolBarAngle
          //translate:`translate(${this.mousePosition.positionX},${this.mousePosition.positionY})`
        };
        _this.svgLists.push(svgItem);
        setTimeout(function () {
          //获取所有g标签 将当前标签追加选中样式
          let gAnyList = document.querySelectorAll('g');
          gAnyList.forEach(g => {
            g.classList.remove("topo-layer-view-selected")
          });
          document.getElementById(svgItem.id).classList.add("topo-layer-view-selected");
          _this.selectSvgInfo = svgItem;
        }, 100);
      }, false);
    },
    created() {
      let _this = this;
      _this.init();
      //当前页面监视键盘输入
      document.onkeydown = function (e) {
        //获取当前选中组件
        let selectSvgInfo = _this.selectSvgInfo;
        if (selectSvgInfo == undefined || selectSvgInfo == null || selectSvgInfo == '') {
          return;
        }
        //事件对象兼容
        let e1 = e || window.event || arguments.callee.caller.arguments[0]
        //键盘按键判断:左箭头-37;上箭头-38；右箭头-39;下箭头-40
        if (e1 && e1.keyCode == 37) {
          e.preventDefault();
          selectSvgInfo.svgPositionX -= 1;
        } else if (e1 && e1.keyCode == 38) {
          e.preventDefault();
          selectSvgInfo.svgPositionY -= 1;
        } else if (e1 && e1.keyCode == 39) {
          e.preventDefault();
          selectSvgInfo.svgPositionX += 1;
        } else if (e1 && e1.keyCode == 40) {
          e.preventDefault();
          selectSvgInfo.svgPositionY += 1;
        }
        //ctrl  c
        else if (e1 && e1.ctrlKey && e1.keyCode == 67) {
          e.preventDefault();
          let copySvgInfoStr = JSON.stringify(selectSvgInfo);
          let copySvgInfo = JSON.parse(copySvgInfoStr);
          copySvgInfo.id = _this.UCore.GenUUid();
          copySvgInfo.svgPositionX = selectSvgInfo.svgPositionX + 10;
          copySvgInfo.svgPositionY = selectSvgInfo.svgPositionY + 10;
          _this.svgLists.push(copySvgInfo);
          _this.selectSvgInfo = copySvgInfo;
          setTimeout(function () {
            //获取所有g标签 将当前标签追加选中样式
            let gAnyList = document.querySelectorAll('g');
            gAnyList.forEach(g => {
              g.classList.remove("topo-layer-view-selected")
            });
            document.getElementById(copySvgInfo.id).classList.add("topo-layer-view-selected");
          }, 100);
        }
        //deleted   ctrl + MAC删除为8
        else if (e1.ctrlKey && e1.keyCode == 8) {
          e.preventDefault();
          //根据当前id找到当前元素的index
          let selectSvgIndex = _this.svgLists.indexOf(_this.svgLists.filter(f => f.id == selectSvgInfo.id)[0]);
          _this.svgLists.splice(selectSvgIndex, 1);
        }

      }
    }

  }

</script>

<style lang="scss">
  .msgbox {
    width: 1000px !important;
    padding: 10px !important;
  }
</style>

<style lang="scss" scoped>
  #root {
    overflow: hidden;
    background-color: #456e9b;
    height: 100vh;
    position: relative;
    .header {
      .enter {
        padding: 18px 10px 12px 10px;
        background-color: #1e3657;
        padding-bottom: 14px;
        .upload {
          position: relative;
          cursor: pointer;
          #file {
            padding-left: 12px;
            outline: none;
          }
          .text {
            position: absolute;
            top: 0px;
            left: 5px;
            width: 30%;
            height: 30px;
            line-height: 40px;
            background-color: #409EFF;
            pointer-events: none;
            cursor: pointer;
          }
          
        }
        .export {
          margin-right: 20px;
        }
        .import {
            position: absolute;
            top: 18px;
            left: 640px;
          }
        .save {
          margin-left: 50px;
        }
      }
      .full {
        position: absolute;
        top: 20px;
        right: 40px;
      }
    }
  }
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #f2f2f2;
    box-shadow: 1px 1px 5px #333 inset;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #444;
  }

  .pageMain {
    position: absolute;
    left: 0;
    right: 0;
    top: 80px;
    bottom: 0;
    overflow: auto;
  }

  .leftNav {
    position: absolute;
    left: 0;
    top: 20px;
    bottom: 0;
    min-width: unset !important;
    max-width: unset !important;
    width: 260px !important;
    z-index: 1;
    overflow: auto;
  }

  .centerContain {
    position: absolute;
    left: 260px;
    right: 300px;
    top: 20px;
    bottom: 0;
    z-index: 1;
    overflow: auto !important;
    overflow-x: auto !important;
    transition: all 0.3s;
    z-index: 111;

    &.fixed {
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    }


    .canvas-content {
      width: 1920px;
      height: 1080px;
    }

    .btns-content {
      position: fixed;
      bottom: 10px;
      right: 320px;
      left: 280px;

      button {
        margin-left: 10px;
      }
    }
  }

  .rightNav {
    position: absolute;
    right: 0;
    left: 10;
    top: 0;
    bottom: 0;
    min-width: unset !important;
    max-width: unset !important;
    width: 300px !important;
    z-index: 1;
    overflow: auto;
  }

  .icon-shrink {
    padding: 10px;
    font-size: 24px;
    color: #fff;
    cursor: pointer;
    background: #1890ff;
    width: 38px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    border-radius: 50%;
    user-select: none;
    z-index: 1111;
  }

  #guide-x {
    display: none;
    position: absolute;
    border-top: 1px dashed #55f;
    width: 100%;
    left: 0px;
    top: 500px;

  }

  #guide-y {
    display: none;
    position: absolute;
    border-left: 1px dashed #55f;
    height: 100%;
    left: 100px;
    top: 0px;


  }

  #canvas {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
  }

  .ant-slider {
    margin-bottom: 16px;
  }

  .topo-layer {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-origin: left top;
    overflow: auto;


    background-image:
      linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
      linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
  }

  .resize-left-top {
    position: absolute;
    height: 10px;
    width: 10px;
    background-color: white;
    border: 1px solid #0cf;
    left: -5px;
    top: -5px;
    cursor: nwse-resize;
  }

  .resize-left-bottom {
    position: absolute;
    height: 10px;
    width: 10px;
    background-color: white;
    border: 1px solid #0cf;
    left: -5px;
    bottom: -5px;
    cursor: nesw-resize;
  }

  .resize-right-top {
    position: absolute;
    height: 10px;
    width: 10px;
    background-color: white;
    border: 1px solid #0cf;
    right: -5px;
    top: -5px;
    cursor: nesw-resize;
  }

  .resize-right-bottom {
    position: absolute;
    height: 10px;
    width: 10px;
    background-color: white;
    border: 1px solid #0cf;
    right: -5px;
    bottom: -5px;
    cursor: nwse-resize;
  }

  .topo-layer-view-selected {
    outline: 1px solid #0cf;
  }

  .upload {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #FFF;
    border: 1px solid #DCDFE6;
    color: #606266;
    -webkit-appearance: none;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: 0;
    margin: 0;
    -webkit-transition: .1s;
    transition: .1s;
    font-weight: 500;
    padding: 8px 10px;
    font-size: 14px;
    border-radius: 4px;
    color: #FFF;
    background-color: #409EFF;
    border-color: #409EFF;
    outline:none; 
  }

  input:focus{   
    border:none;
  }
</style>
